<!-- Header -->
<template>
<div>
<header class="header">
        <div class="header_content d-flex flex-row align-items-center justify-content-start">
            
            <!-- Hamburger -->
            <div class="hamburger menu_mm"><i class="fa fa-bars menu_mm" aria-hidden="true"></i></div>

            <!-- Logo -->
            <div class="header_logo">
                <a href="#"><div>美<span>多商城</span></div></a>
            </div>

            <!-- Navigation -->
            <nav class="header_nav">
                <ul class="d-flex flex-row align-items-center justify-content-start">
                    <li><a href="/">home</a></li>
                    <li><a href="#">woman</a></li>
                    <li><a href="#">man</a></li>
                    <li><a href="#">lookbook</a></li>
                    <li><a href="#">blog</a></li>
                    <li><a href="#">contact</a></li>
                </ul>
            </nav>

            <!-- Header Extra -->
            <div class="header_extra ml-auto d-flex flex-row align-items-center justify-content-start">

                

        

                <!-- Cart -->
                <div class="cart d-flex flex-row align-items-center justify-content-start">
                    <div class="cart_icon"><a href="cart">
                        <img src="../assets/images/bag.png" alt="">
                        <div class="cart_num">2</div>
                    </a></div>
                </div>

            </div>

        </div>
    </header>

    <!-- Menu -->

    <div class="menu d-flex flex-column align-items-start justify-content-start menu_mm trans_400">
        <div class="menu_close_container"><div class="menu_close"><div></div><div></div></div></div>
        <div class="menu_top d-flex flex-row align-items-center justify-content-start">

            <!-- Language -->
            <div class="info_languages has_children">
                <div class="dropdown_text">login</div>
                

            </div>

            <!-- Currency -->
            <div class="info_currencies has_children">
                <div class="dropdown_text">register</div>

            </div>

        </div>
        <div class="menu_search">
            <form action="#" class="header_search_form menu_mm">
                <input type="search" class="search_input menu_mm" placeholder="Search" required="required">
                <button class="header_search_button d-flex flex-column align-items-center justify-content-center menu_mm">
                    <i class="fa fa-search menu_mm" aria-hidden="true"></i>
                </button>
            </form>
        </div>
        <nav class="menu_nav">
            <ul class="menu_mm">
                <li class="menu_mm"><a href="/">home</a></li>
                <li class="menu_mm"><a href="#">woman</a></li>
                <li class="menu_mm"><a href="#">man</a></li>
                <li class="menu_mm"><a href="#">lookbook</a></li>
                <li class="menu_mm"><a href="blog.html">blog</a></li>
                <li class="menu_mm"><a href="contact.html">contact</a></li>
            </ul>
        </nav>
        <div class="menu_extra">
            <div class="menu_social">
                <ul>
                    <li><a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
                    <li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
                </ul>
            </div>
        </div>
    </div>
    
    <!-- Sidebar -->

    <div class="sidebar">
        
        <!-- Info -->
        <div class="info">
            <div class="info_content d-flex flex-row align-items-center justify-content-start">
                
                <!-- Language -->
                <div class="info_languages has_children">
                    <div class="dropdown_text"><router-link to='login'>login</router-link></div>
                    
                    

                </div>

                <!-- Currency -->
                <div class="info_currencies has_children">
                    <div class="dropdown_text"><router-link to='register'>register</router-link></div>

                </div>
                <div class="info_currencies has_children">
                    <div class="dropdown_text"><span @click='logout'>退 出</span></div>

                </div>

            </div>
        </div>

        <!-- Logo -->
        <div class="sidebar_logo">
            <a href="#"><div>美<span>多商城</span></div></a>
        </div>

        <!-- Sidebar Navigation -->
        <nav class="sidebar_nav">
            <ul>
                <li><a href="/">home<i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
                <li><a href="#">woman<i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
                <li><a href="#">man<i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
                <li><a href="#">lookbook<i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
                <li><a href="blog.html">blog<i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
                <li><a href="#">contact<i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
                <li><a href="skillgoods">秒杀活动<i class="fa fa-angle-right" aria-hidden="true"></i></a></li>
            </ul>
        </nav>

        <!-- Search搜索-->
        <div class="search">
           <input type="text" class="search_input" placeholder="Search" v-model="title" required="required">
            <button class="search_button" ><i class="fa fa-search" aria-hidden="true" @click="btn_search"></i></button>
        </div>

        <!-- Cart -->
        <div class="cart d-flex flex-row align-items-center justify-content-start">
            <div class="cart_icon"><a href="cart">
                <img src="../assets/images/bag.png" alt="">
                <div class="cart_num">{{count}}</div>
            </a></div>
            <div class="cart_text">bag</div>
            <div class="cart_price">${{total_price}}</div>
        </div>
    </div>
</div>
</template>

<script>
import Cookies from 'js-cookie'

export default {
    data(){
   return{
    title:[],
    datalist:[],
   }
   
  },
    props:['total_price','count'],
    mounted:function(){

    },
    methods:{
        logout:function(){
            Cookies.remove('name')
            window.location.reload()
        },
        btn_search:function(){
        this.$emit('search_info', this.title),
        this.$router.push({ name: 'search_data', params: { userId: this.title }});
   }

    
  },
      
        
  
    }
    
 

</script>
             
<style>
</style>